<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
		<!-- 引入组件库 -->
		<style>
			/* .app1{
			       padding-left:300px
			} */
			html,body,.wraper,#app{
				height:100%;
				width:100%;
				overflow:hidden;
			}
			body{
				padding:0;
				margin:0;
				
			}

			.el-menu-vertical-demo:not(.el-menu--collapse) {
				width:200px;
				min-height: 100%;
			}

		
			.sidebar{
				    display: block;
				    position: absolute;
				    left: 0;
				    top: 70px;
				    bottom: 0;
				    overflow-y: auto;
			}
			.sidebar>ul {
			    height: 100%;
			}
			.content-box {
			    position: absolute;
			    left: 200px;
			    right: 0;
			    top: 70px;
			    bottom: 0;
			    padding-bottom: 30px;
			    -webkit-transition: left .3s ease-in-out;
			    transition: left .3s ease-in-out;
			    background: #f0f0f0;
				overflow-y:auto;
				height: calc(100% - 70px);
			}
			
			.header {
			    position: relative;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    width: 100%;
			    height: 70px;
			    font-size: 22px;
			    color: #fff;
			}
			.content-collapse {
			    left: 65px;
			}
			.i-collapse{
				transform:rotate(180deg);
				 transition: left .3s ease-in-out;

			}
			.switchCollapse{
				text-align: right;
			}
		</style>
	</head>
	<body>
		<div class="app1" id="app">
		   <div class = "wraper">
		   
<!-- 	         <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
				  <el-radio-button :label="false">展开</el-radio-button>
				  <el-radio-button :label="true">收起</el-radio-button>
				</el-radio-group> -->
				<div class = "header"></div>
				<div class = "sidebar">
		
			    <el-menu
			      default-active="2"
			      class="el-menu-vertical-demo"
			      @open="handleOpen"
			      @close="handleClose"
				  :collapse="isCollapse"
				  @select = "handleSelect"
			      background-color="#00824a"
			      text-color="#fff"
				  mode= "vertical"
			      active-text-color="#9bd9ff">
				  <!-- 展开收缩按钮 -->
				  <el-menu-item index="1" @click = "function(){isCollapse = !isCollapse}" class="switchCollapse">
				    <i class="el-icon-s-unfold" v-bind:class="{ 'i-collapse': !isCollapse }"></i>
				  </el-menu-item>
				  <!-- Topic一级菜单 -->
			      <el-submenu index="2">
			        <template slot="title" >
			          <i class="el-icon-s-opportunity"></i>
			          <span>Topic</span>
			        </template>
			          <el-menu-item index="2-1"><i class="el-icon-chat-line-round"></i>My Topic</el-menu-item>
			          <el-menu-item index="2-2"><i class="el-icon-user-solid"></i>User List</el-menu-item>
			          <el-menu-item index="2-3"><i class="el-icon-s-grid"></i>Topic Total</el-menu-item>
			      </el-submenu>
			      <el-submenu index="3">
			        <template slot="title" >
			          <i class="el-icon-s-opportunity"></i>
			          <span>Report</span>
			        </template>
			          <el-menu-item index="3-1"><i class="el-icon-chat-line-round"></i>My Report</el-menu-item>
			          <el-menu-item index="3-2"><i class="el-icon-user-solid"></i>User Report</el-menu-item>
			          <el-menu-item index="3-3"><i class="el-icon-s-grid"></i>Total Report</el-menu-item>
			      </el-submenu>
			     
			      <el-menu-item index="4">
			        <i class="el-icon-setting"></i>
			        <span slot="title">My Profile</span>
			      </el-menu-item>
			    </el-menu>
	
		
			</div>
	
		<div class="content-box" v-bind:class="{ 'content-collapse': isCollapse }">
	   
			<el-table
			
			    :data="tableData"
			    border
				resizable
				:max-height= "height"
				
			    style="width: 100%">
			    <el-table-column
			      fixed
			      prop="user"
			      label="User"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="email"
			      label="Email"
			      width="120">
			    </el-table-column>
				
			    <el-table-column
			      prop="department"
			      label="Department"
			      width="120">
			    </el-table-column>
				<!-- person Status -->
				<!-- On job ; Leval:Date Year and month  -->
				<el-table-column
				  prop="zip"
				  label="Person Status"
				  width="120">
				</el-table-column>
			    <el-table-column
			      prop="deptMgr"
			      label="N+1/Deptment Mgr"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      prop=""
			      label="N+1/Deptment Mgr Email"
			      width="300">
			    </el-table-column>
			   <el-table-column
			     prop="zip"
			     label="Key N-1"
			     width="120">
			   </el-table-column>
			    <el-table-column
			      fixed="right"
			      label="操作"
			      width="100">
			      <template slot-scope="scope">
			        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
			        <el-button type="text" size="small">编辑</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			  </div>

		</div>
		</div>
		
	</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		let isCollapse
	    new Vue({
	      el: '#app',
	      data() {
	        return { visible: false ,
			isCollapse:true,
			height:document.documentElement.clientHeight - 100,
			tableData: [{
			          date: '2016-05-02',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-04',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1517 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-01',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1519 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1516 弄',
			          zip: 200333,
					  }, {
					    date: '2016-05-03',
					    name: '王小虎',
					    province: '上海',
					    city: '普陀区',
					    address: '上海市普陀区金沙江路 1516 弄',
					    zip: 200333,
						}, {
						  date: '2016-05-03',
						  name: '王小虎',
						  province: '上海',
						  city: '普陀区',
						  address: '上海市普陀区金沙江路 1516 弄',
						  zip: 200333,
						  }, {
						    date: '2016-05-03',
						    name: '王小虎',
						    province: '上海',
						    city: '普陀区',
						    address: '上海市普陀区金沙江路 1516 弄',
						    zip: 200333,
							}, {
							  date: '2016-05-03',
							  name: '王小虎',
							  province: '上海',
							  city: '普陀区',
							  address: '上海市普陀区金沙江路 1516 弄',
							  zip: 200333,
							  }, {
							    date: '2016-05-03',
							    name: '王小虎',
							    province: '上海',
							    city: '普陀区',
							    address: '上海市普陀区金沙江路 1516 弄',
							    zip: 200333,
								}, {
								  date: '2016-05-03',
								  name: '王小虎',
								  province: '上海',
								  city: '普陀区',
								  address: '上海市普陀区金沙江路 1516 弄',
								  zip: 200333,
								  }, {
								    date: '2016-05-03',
								    name: '王小虎',
								    province: '上海',
								    city: '普陀区',
								    address: '上海市普陀区金沙江路 1516 弄',
								    zip: 200333,
									}, {
									  date: '2016-05-03',
									  name: '王小虎',
									  province: '上海',
									  city: '普陀区',
									  address: '上海市普陀区金沙江路 1516 弄',
									  zip: 200333,
									  }, {
									    date: '2016-05-03',
									    name: '王小虎',
									    province: '上海',
									    city: '普陀区',
									    address: '上海市普陀区金沙江路 1516 弄',
									    zip: 200333,
										}, {
										  date: '2016-05-03',
										  name: '王小虎',
										  province: '上海',
										  city: '普陀区',
										  address: '上海市普陀区金沙江路 1516 弄',
										  zip: 200333,
										  }, {
										    date: '2016-05-03',
										    name: '王小虎',
										    province: '上海',
										    city: '普陀区',
										    address: '上海市普陀区金沙江路 1516 弄',
										    zip: 200333,
											}, {
											  date: '2016-05-03',
											  name: '王小虎',
											  province: '上海',
											  city: '普陀区',
											  address: '上海市普陀区金沙江路 1516 弄',
											  zip: 200333,
											  }, {
											    date: '2016-05-03',
											    name: '王小虎',
											    province: '上海',
											    city: '普陀区',
											    address: '上海市普陀区金沙江路 1516 弄',
											    zip: 200333,
												}, {
												  date: '2016-05-03',
												  name: '王小虎',
												  province: '上海',
												  city: '普陀区',
												  address: '上海市普陀区金沙江路 1516 弄',
												  zip: 200333,
												  }, {
												    date: '2016-05-03',
												    name: '王小虎',
												    province: '上海',
												    city: '普陀区',
												    address: '上海市普陀区金沙江路 1516 弄',
												    zip: 200333,
													}, {
													  date: '2016-05-03',
													  name: '王小虎',
													  province: '上海',
													  city: '普陀区',
													  address: '上海市普陀区金沙江路 1516 弄',
													  zip: 200333,
													  }, {
													    date: '2016-05-03',
													    name: '王小虎',
													    province: '上海',
													    city: '普陀区',
													    address: '上海市普陀区金沙江路 1516 弄',
													    zip: 200333,
														}, {
														  date: '2016-05-03',
														  name: '王小虎',
														  province: '上海',
														  city: '普陀区',
														  address: '上海市普陀区金沙江路 1516 弄',
														  zip: 200333,
														  }, {
														    date: '2016-05-03',
														    name: '王小虎',
														    province: '上海',
														    city: '普陀区',
														    address: '上海市普陀区金沙江路 1516 弄',
														    zip: 200333,
															}, {
															  date: '2016-05-03',
															  name: '王小虎',
															  province: '上海',
															  city: '普陀区',
															  address: '上海市普陀区金沙江路 1516 弄',
															  zip: 200333,
															  }, {
															    date: '2016-05-03',
															    name: '王小虎',
															    province: '上海',
															    city: '普陀区',
															    address: '上海市普陀区金沙江路 1516 弄',
															    zip: 200333,
																}, {
																  date: '2016-05-03',
																  name: '王小虎',
																  province: '上海',
																  city: '普陀区',
																  address: '上海市普陀区金沙江路 1516 弄',
																  zip: 200333,
																  }, {
																    date: '2016-05-03',
																    name: '王小虎',
																    province: '上海',
																    city: '普陀区',
																    address: '上海市普陀区金沙江路 1516 弄',
																    zip: 200333,
																	}, {
																	  date: '2016-05-01',
																	  name: '烛月',
																	  province: '上海',
																	  city: '普陀区',
																	  address: '上海市普陀区金沙江路 1516 弄',
																	  zip: 200333
			        }]
			}
	      },
		   methods: {
		        handleOpen(key, keyPath) {
		          console.log(key, keyPath);
		        },
		        handleClose(key, keyPath) {
		          console.log(key, keyPath);
		        },
				handleSelect(key,keyPath){
					console.log(key,keyPath)
				},
				switchCollapse(key){
					console.log(1)
					console.log(data.isCollapse)
					
				}
		      },
			  computed:{
				  tableHeight:function(){
					 this.height = document.documentElement.clientHeight - 70
					  
				  },
				  
				  
			  },
			  mounted(){
				  window.onresize =()=> {this.height = document.documentElement.clientHeight - 100};
			  }
	    })
	  </script>
</html>
